<template>
  <div class="search">
    <Card>
      <Form ref="searchForm" :label-width="70" :model="queryParams" class="search-form" inline>
        <Form-item label="會員" prop="numberId">
          <Select v-model="queryParams.params.numberId" style="width:180px">
            <Option v-for="item in numberList" :key="item.id" :value="item.id">{{ item.username }}</Option>
          </Select>
        </Form-item>
        <Form-item label="郵電號" prop="emailNum">
          <Input
              v-model="queryParams.params.emailNum"
              clearable
              placeholder="請輸入會員emial號"
              style="width: 200px"
              type="text"
          />
        </Form-item>
        <Form-item label="發郵日期" prop="createTime">
          <DatePicker v-model="queryParams.params.createTime" clearable format="yyyy-MM-dd"
                      placeholder="發郵日期" style="width: 300px"
                      type="date">
          </DatePicker>
        </Form-item>
        <div style="margin: 30px">
          <Button class="search-btn" icon="ios-search" style="margin-left: 10px;" type="primary" @click="handleSearch">
            搜索
          </Button>
          <Button class="search-btn" style="margin-left: 10px;" type="primary" @click="resetSearch">重置</Button>
          <Button class="search-btn" style="margin-left: 10px;" type="primary" @click="add">添加</Button>
        </div>

        <Table ref="table" :columns="columns" :data="data" :loading="loading" border class="mt_10"></Table>
        <!-- 添加 -->
        <Modal
            v-model="modalVisible"
            :closable="false"
            :mask-closable="false"
            :title="modalTitle"
            :width="500">
          <Form ref="form" :label-width="100" :model="formAdd">
            <Form-item label="會員" prop="numberId">
              <Select v-model="formAdd.numberId" style="width:260px">
                <Option v-for="item in numberList" :key="item.id" :value="item.id">{{ item.username }}</Option>
              </Select>
            </Form-item>
            <Form-item label="郵電號" prop="emailNum">
              <Input
                  v-model="formAdd.emailNum"
                  clearable
                  placeholder="郵電號"
                  style="width: 200px"
                  type="text"
              />
            </Form-item>
            <Form-item label="內容" prop="content">
              <Input
                  v-model="formAdd.content"
                  clearable
                  placeholder="內容"
                  style="width: 200px"
                  type="text"
              />
            </Form-item>
            <Form-item label="備注" prop="remark">
              <Input
                  v-model="formAdd.remark"
                  clearable
                  placeholder="備注"
                  style="width: 200px"
                  type="text"
              />
            </Form-item>
          </Form>
          <div slot="footer">
            <Button type="text" @click="cancel">取消</Button>
            <Button v-if="modalTitle==='添加'" type="primary" @click="addData">添加</Button>
            <Button v-if="modalTitle==='修改'" type="primary" @click="editData">修改</Button>
          </div>

        </Modal>
        <Row class="mt_10" justify="end" type="flex">
          <Page :current="queryParams.pageNumber" :page-size="queryParams.pageSize" :page-size-opts="[10, 20, 50]"
                :total="total"
                show-elevator show-sizer
                show-total size="small" @on-change="changePage" @on-page-size-change="changePageSize"></Page>
        </Row>
      </Form>
    </Card>
  </div>

</template>

<script>
import {add, del, initSelect, list} from "@/api/email";
import {editHostStore} from "@/api/hostStore";

export default {
  name: "emailList",
  data() {
    return {
      loading: true, // 表單加载狀態
      queryParams: {
        pageNumber: 1,
        pageSize: 10, // 頁面大小
        sortName: 'id',
        sortOrder: 'desc',
        modalVisible: false,
        params: {
          emailNum: '',
          createTime: '',
          numberId: '',
        }
      },
      formAdd: {},
      selectDate: null, // 创建時間
      modalVisible: false, // 添加或编辑显示
      modalTitle: "", // 添加或编辑標題
      columns: [
        {
          title: "店鋪名稱",
          key: "storeName",
          width: 180,
          tooltip: true,
        },
        {
          title: "會員名稱",
          key: "numberName",
          width: 180,
          tooltip: true,
        },
        {
          title: "郵電號",
          key: "emailNum",
          width: 180,
        },
        {
          title: "郵電內容",
          key: "content",
          width: 300,
        },
        {
          title: "郵電時間",
          key: "createTime",
          width: 200,
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            let enableOrDisable = "";
            return h("div", [
              enableOrDisable,
              h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.del(params.row);
                      }
                    }
                  },
                  "删除"
              )
            ]);
          }
        }
      ],
      data: [], // 表單數据
      total: 0, // 表單數据总數
      selectedShop: false, //用於是否選擇店铺
      numberList: [], //會員list

    };
  },
  // 初始化數据
  mounted() {
    this.getDataList();
    this.initSelect();
  },
  methods: {
    // 回调给父级
    callback(val) {
      this.$emit("callback", val);
    },
    // 分頁 改变頁碼
    changePage(pageNumber) {
      this.queryParams.pageNumber = pageNumber;
      this.getDataList();
    },
    // 分頁 改变頁數
    changePageSize(pageNumber) {
      this.queryParams.pageNumber = 1;
      this.queryParams.pageSize = pageNumber;
      this.getDataList();
    },
    // 搜索
    handleSearch() {
      this.queryParams.pageNumber = 1;
      this.queryParams.pageSize = 10;
      this.getDataList();
    },
    // 获取列表數据
    getDataList() {
      console.log(JSON.stringify(this.queryParams))
      list(this.queryParams).then(res => {
        if (res.success) {
          this.data = res.result.records
          this.total = res.result.total;
        }
        //关闭加载狀態
        this.loading = false
      })
    },
    resetForm() {
      this.formAdd = {};
    },
    //添加
    add(item) {
      this.modalTitle = "添加";
      this.modalVisible = true;
    },
    //刪除
    del(item) {
      let id = {id: item.id}
      del(id).then(res => {
        if (res.code == 200) {
          this.$Message.success('删除成功');
        } else {
          this.$Message.success('删除失败');
        }
        this.getDataList();
        this.resetForm();
      });
    },
    addData() {
      add(this.formAdd).then(res => {
        if (res.code == 200) {
          this.$Message.success('添加成功');
        } else {
          this.$Message.success('添加失败');
        }
        this.getDataList();
        this.modalVisible = false;
      });
      this.resetForm();
    },
    editData() {
      editHostStore(this.formAdd).then(res => {
        this.getDataList();
        this.modalVisible = false;
      })
      this.resetForm();
    },
    cancel() {
      this.modalVisible = false;
      this.resetForm();
      this.getDataList();
    },
    //初始化下拉框
    initSelect() {
      initSelect().then(res => {
        this.numberList = res.result
      });
    },
    //重置搜索框
    resetSearch() {
      this.queryParams.params = {}
      this.getDataList();
    }
  }
};
</script>
